<template>
  <PageWrapper :title="title">
    <div style="display: flex; justify-content: center">
      <a-input-search
        v-model:value="searchText"
        placeholder="请输入题目名称"
        style="width: 600px; margin-bottom: 16px"
        enter-button
        @search="onSearch"
        @change="onSearch"
      />
      <a-switch
        v-model:checked="ifShow"
        checked-children="全展示"
        un-checked-children="全折叠"
        style="top: 5px; left: 5px"
      />
    </div>
    <a-collapse v-model:activeKey="activeKey">
      <a-collapse-panel
        v-for="(item, index) in questions"
        :key="item.id"
        :header="`${index + 1}、${item.question}`"
        style="background-color: white"
      >
        <p v-html="item.answer"></p>
      </a-collapse-panel>
    </a-collapse>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref, computed, watch } from 'vue';
  import { getInterviewQCategoriesApi } from '@/api/interviewQ/interviewQCategories';
  import { getInterviewQApi } from '@/api/interviewQ/interviewQ';
  import { PageWrapper } from '@/components/Page';
  import { debounce, get } from 'lodash-es';
  import { useI18n } from '@/hooks/web/useI18n';

  const { t } = useI18n();
  const questions = ref<any[]>([]);
  const originData = ref<any[]>([]);
  const array = location.href.split('/');
  const router = array[array.length - 1].replace('Q', '');
  const title = computed(() => t(`routes.demo.interviewQuestionBank.${router}`));
  const activeKey = ref<string[]>([]);
  const activeKeyCopy = ref<string[]>([]);
  const ifShow = ref<boolean>(true);
  const searchText = ref<string>('');
  const getData = async () => {
    const categories: any[] = await new Promise((resolve) => {
      getInterviewQCategoriesApi({ name: title.value }).then((response) => {
        const _response = get(response, 'data');
        console.log('🚀 ~ res:', _response);
        const array: any[] = [];
        _response.data.forEach((item) => {
          array.push({
            id: item.id,
            title: item.name,
          });
        });
        resolve(array);
      });
    });
    console.log(categories);

    interface QqueryField {
      category_id: string;
    }

    questions.value = await new Promise((resolve) => {
      let query: QqueryField = { category_id: '' };
      categories.forEach((item) => {
        query.category_id = item.id;
      });
      getInterviewQApi(query).then((response) => {
        const _response = get(response, 'data');
        console.log('🚀 ~ res:', _response);
        const array: any[] = [];
        _response.data.forEach((item) => {
          array.push({
            id: item.id,
            question: item.question,
            answer: item.answer,
            checked: true,
          });
          activeKey.value.push(item.id);
          activeKeyCopy.value.push(item.id);
        });
        resolve(array);
      });
    });
    originData.value = JSON.parse(JSON.stringify(questions.value));
  };

  getData();

  watch(
    () => ifShow.value,
    (newValue) => {
      if (newValue) {
        activeKey.value = activeKeyCopy.value;
      } else {
        activeKey.value = [];
      }
    },
  );

  // 前端搜索功能
  const onSearch = () => {
    const fn = () => {
      if (searchText.value) {
        questions.value = questions.value.filter((i) => {
          // 转小写，再判断
          const lowerStr = i.question.toLowerCase();
          const lowerSearchStr = searchText.value.toLowerCase();
          return lowerStr.includes(lowerSearchStr);
        });
      } else {
        console.log('无值', originData.value);
        questions.value = JSON.parse(JSON.stringify(originData.value));
      }
    };
    debounce(fn, 500)();
  };
</script>

<style lang="less" scoped>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
</style>
